<template>
    <view>
        <picker :range="pickerList" :value="index" @change="onChange" :disabled="disabled" @click="onClick" @cancel="onCancel">
            <view class="ep-picker-box" :class="{'disabled':disabled}">
                <view :class="['label-item',size]">{{selectLabel}}</view>
                <!-- 箭头图标切换 -->
                <text v-show="!show_options" class="iconfont icon-xiala"></text>
                <text v-show="show_options" class="iconfont icon-xialashang"></text>
            </view>
        </picker>
    </view>
</template>

<script>
    //为何封装此插件？
    //1.picker在页面中的展示效果完全取决于solt插槽，它本身其负责监听点击事件，并从底部弹出选择项，封装slot的样式提高开发效率
    //2.picker组件本身只支持纯字符串数组，而实际开发中，每个下拉项基本上都是2个字段（value和label），封装此逻辑便于对接后台接口
    //3.封装prop，使其支持v-model
    export default{
        data(){
            return {
                show_options: false,//picker的开启状态状态  通过click事件模拟获知
            }
        },
        props:{
            value:{
                type:[String,Number,Boolean],
                default:""
            },
            options:{
                type: Array,
                default: function(){
                    return []
                }
            },
            disabled:{
                type: Boolean,
                default: false
            },
            size:{
                type: String,
                default:""
            }
        },
        model:{
            prop:'value',
            event:"valChange"
        },
        methods:{
            onChange(e){
                //当获取前选中项的下标
                var index = e.detail.value
                //获取当期选中的项的值
                var value = this.options[index].value
                //修改v-model的值
                this.$emit('valChange',value)
                //将事件通知父组件
                this.$emit('change', value)
                //恢复show_options的状态
                this.show_options = false
            },
            onCancel(){
                //恢复show_options的状态
                this.show_options = false
            },
            onClick(){
                this.show_options = !this.show_options
            }
        },
        computed:{
            //纯字符串数组
            pickerList(){
                return this.options.map(item=>{
                    return item.label
                })
            },
            //picker当前下标
            index(){
                //查找对象的下拉项
                var target_index = this.options.findIndex(item=>{
                    return item.value == this.value
                })
                //如果存在
                if(target_index != -1){
                    return target_index
                }else{
                    //不存在 则直接返回 空
                    return ''
                }
            },
            //当前选中项的文本
            selectLabel(){
                //查找对象的下拉项
                var target = this.options.find(item=>{
                    return item.value == this.value
                })
                if(target){
                    return target.label
                }else{
                    return '请选择'
                }
            }
        }
    }
</script>

<style scoped>
    /* 引入字体图标 */
    @import './iconfont.css';
    
    .ep-picker-box{
        border: 1px solid rgb(229, 229, 229);
        border-radius: 4px;
        display: flex;
        align-items: center;
        position: relative;
    }
    .ep-picker-box.disabled{
        cursor:not-allowed;
        background-color: #f5f7fa;
    }
    .ep-picker-box .label-item{
        display: flex;align-items: center;height: 36px;padding-left:10px;color:#333;font-size: 14px;
    }
    .ep-picker-box .label-item.small{
        height: 30px;
    }
    .ep-picker-box .iconfont{
        position: absolute;
        top: 50%;
        right:5px;
        font-size: 20px;
        transform: translateY(-50%);
        color:#B8B8B8;
    }
</style>